<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>KISSY Gallery 组件示例</title>
<link rel="shortcut icon" href="../../kissy-dpl/base/assets/favicon.ico"/>
<link rel="stylesheet" href="../../kissy-dpl/base/assets/reset.css"/>
<link rel="stylesheet" href="../../kissy-dpl/base/assets/kissy-docs.css"/>
<link rel="stylesheet" href="http://docs.kissyui.com/docs/html/static/demo/menu/assets/c2c-ui.css"/>
<link rel="stylesheet" href="http://docs.kissyui.com/kissy-gallery/gallery/pagination/1.0/tmp/demo.css"/>
<script src="http://assets.daily.taobao.net/s/kissy/1.2.0/kissy.js"></script>
<script>
    KISSY.config({
        packages:[
            {
                name:"gallery",
                tag:"20111226",
                path:"http://assets.daily.taobao.net/s/kissy/",
                charset:"utf-8"
            }
        ],
        map:[
                // Gallery 组件 JS combo 成一个
                [/http:\/\/assets.daily.taobao.net\/s\/kissy\/gallery\/(?:countdown|random-show|couple-select|reflection|starrating|grid|digital-clock|pagination)\/1.0\/index(-min)?\.js(.+)$/, "http://assets.daily.taobao.net/s/kissy/gallery/??countdown/1.0/index$1.js,random-show/1.0/index$1.js,couple-select/1.0/index$1.js,reflection/1.0/index$1.js,starrating/1.0/index$1.js,grid/1.0/index$1.js,digital-clock/1.0/index$1.js,pagination/1.0/index$1.js$2"],
                // Gallery 组件 CSS combo 成一个
                [/http:\/\/assets.daily.taobao.net\/s\/kissy\/gallery\/(?:grid|countdown|pagination|starrating|digital-clock)\/1.0\/assets\/(?:uicommon|grid|bar|countdown|pagination|starrating|digital-clock-js)(-min)?\.css(.+)$/, "http://assets.daily.taobao.net/s/kissy/gallery/??grid/1.0/assets/uicommon$1.css,grid/1.0/assets/grid$1.css,grid/1.0/assets/bar$1.css,countdown/1.0/assets/countdown$1.css,pagination/1.0/assets/pagination$1.css,starrating/1.0/assets/starrating$1.css,digital-clock/1.0/assets/digital-clock-js$1.css$2"],
                // KISSY 组件 JS combo 成一个
                [/http:\/\/assets.daily.taobao.net\/s\/kissy\/1.2.0\/(?:calendar|template|uibase|component|button|menu|menubutton|switchable)(-min)?.js(.+)$/, "http://assets.daily.taobao.net/s/kissy/1.2.0/??calendar$1.js,template$1.js,uibase$1.js,component$1.js,button$1.js,menu$1.js,menubutton$1.js,switchable$1.js$2"]
        ]
    });
</script>
<style>
    .s-content {
        border: 2px solid #E0F0EF;
        height: 280px;
        margin: 10px 0;
        overflow: auto;
        padding: 10px;
    }
</style>
</head>
<body>
<div id="header">
    <h1 class="logo"><a alt="KISSY" href="http://kissyui.com/"><img src="../../kissy-dpl/base/assets/logo.png"/></a></h1>
    <p class="sub-title">Gallery</p>
    <ul class="navigation">
        <li><a href="http://blog.kissyui.com/">博客</a></li>
        <li><a href="http://github.com/kissyteam">源码</a></li>
    </ul>
</div>
<div id="content">
<div class="s-crumbs">
    <span>当前位置：</span>
    <a href="http://kissyui.com/">KISSY</a>
    <a href="../index.html">Gallery</a>
    <span>Demo</span>
</div>
<div class="layout grid-m">
<div class="col-main">
<div class="s-section">
    <h4 class="s-title"><a href="http://docs.kissyui.com/kissy-gallery/gallery/countdown/1.0/demo.html">倒计时</a></h4>
    <div class="s-content cd-lite cd-slide" data-time="1121685000">剩余时间：${h}时${m}分${s}秒</div>
    <script>
        KISSY.use("gallery/countdown/1.0/, gallery/countdown/1.0/assets/countdown.css", function(S, Countdown) {

            var slides = [],
                    flips = [];

            function factory(cd) {
                if (cd.hasClass('cd-slide')) {
                    slides.push(Countdown(cd, {effect: 'slide'}));
                } else if (cd.hasClass('cd-flip')) {
                    flips.push(Countdown(cd, {effect: 'flip'}));
                } else {
                    Countdown(cd);
                }
            }

            S.all('.cd-lite').each(factory);
        });

    </script>
</div>
<div class="s-section">
    <h4 class="s-title"><a href="http://docs.kissyui.com/kissy-gallery/gallery/digital-clock/1.0/clock-js.html">数字时钟</a></h4>
    <div  class="s-content ">
        <div id="clock_con"></div>
    </div>
    <script>
        KISSY.ready(function (S) {
            S.use("gallery/digital-clock/1.0/,gallery/digital-clock/1.0/assets/digital-clock-js.css", function(S, DC) {
                var clock = new DC.DigitalClockJS({
                    render: S.one("#clock_con"),
                    zoomLimit: S.UA.ie == 6 ? 0.2 : 0.15,
                    autoRender:true,
                    zoom:1
                });


                setInterval(function () {
                    clock.set("date", new Date());
                }, 1000);
            });
        });
    </script>
</div>
<div class="s-section">
    <h4 class="s-title"><a href="http://docs.kissyui.com/kissy-gallery/gallery/pagination/1.0/demo.html">分页</a></h4>

    <div class="page-content" id="page-content-5"></div>
    <div class="pagination" id="page5"></div>
    <script type="text/template" id="default-pagination-tpl-2">
        {{#! 显示首页 }}
        {{#if currentPage === startPage }}
        <a class="pg-prev pg-first pg-disabled" href="#">首页</a>
        {{#else}}
        <a class="pg-prev pg-first" href="#" data-page="{{ startPage }}">首页</a>
        {{/if}}

        {{#! 显示上一页 }}
        {{#if currentPage === startPage }}
        <a class="pg-prev pg-disabled">上一页</a>
        {{#else}}
        <a class="pg-prev" href="#" data-page="{{ currentPage - 1 }}">上一页</a>
        {{/if}}

        {{#if showPageNum }}
        {{#! 左边固定显示几页, 如固定显示 1 和 2 }}
        {{#if currentPage > startPage + alwaysDisplayCount - 1}}
        {{#for var i = 0; i < alwaysDisplayCount; i++ }}
        {{#! 避免后面重复显示 }}
        {{#if i + startPage < startIndex }}
        <a class="pg-page pg-item" href="#" data-page="{{ i + startPage }}">{{ i + startPage }}</a>
        {{/if}}
        {{/for}}
        {{/if}}

        {{#! 是否显示省略号 }}
        {{#if ellipseText && startIndex > startPage + alwaysDisplayCount }}
        <span class="pg-item">…</span>
        {{/if}}

        {{#! 显示页数 }}
        {{#for var i = startIndex; i <= endIndex; i++ }}
        {{#if currentPage !== i }}
        <a class="pg-page pg-item" href="#" data-page="{{ i }}">{{ i }}</a>
        {{#else}}
        <span class="pg-current pg-item">{{ i }}</span>
        {{/if}}
        {{/for}}

        {{#! 是否显示省略号 }}
        {{#if ellipseText && endIndex < endPage - alwaysDisplayCount }}
        <span class="pg-item">…</span>
        {{/if}}

        {{#! 右边固定显示几页 }}
        {{#if currentPage < endPage - alwaysDisplayCount + 1 }}
        {{#for var i = endPage - alwaysDisplayCount + 1; i <= endPage; i++ }}
        {{#if i > endIndex }}
        <a class="pg-page pg-item" href="#" data-page="{{ i }}">{{ i }}</a>
        {{/if}}
        {{/for}}
        {{/if}}
        {{/if}}

        {{#! 显示下一页 }}
        {{#if currentPage === endPage }}
        <a class="pg-next pg-disabled">下一页</a>
        {{#else}}
        <a class="pg-next" href="#" data-page="{{ currentPage + 1 }}">下一页</a>
        {{/if}}

        {{#! 显示末页 }}
        {{#if currentPage === endPage }}
        <a class="pg-next pg-last pg-disabled" href="#">末页</a>
        {{#else}}
        <a class="pg-next pg-last" href="#" data-page="{{ endPage }}">末页</a>
        {{/if}}

        {{#! 显示当前页和总页数}}
                    <span class="pg-skip">
                        共{{ endPage - startPage + 1 }}页 到第
                        <!--<form method="get" action="/search?q=mp3&amp;tab=all" >-->
                            <input type="text" id="J_jumpTo" size="2" class="pg-jump" value="{{ currentPage }}"/>页
                            <button type="submit" class="J_jumpToBtn pg-next">确定</button>
                        <!--</form>-->
                    </span>
        <select name="decorateSelect" id="decorateSelect">
            <option value="10">10</option>
            <option value="20">20</option>
            <option value="30">30</option>
            <option value="40">40</option>
            <option value="50">50</option>
        </select>
    </script>
    <script>
        KISSY.use('gallery/pagination/1.0/index, menubutton, gallery/pagination/1.0/assets/pagination.css', function(S, P, MenuButton) {
            var content = S.one('#page-content-5'),
                    pagesize = 10,
                    pagination = new P({
                        container: '#page5',
                        totalPage: 10,
                        template: S.one('#default-pagination-tpl-2').html(),
                        callback: function(idx, pg, ready) {
                            // show loading
                            content.html('').addClass('loading');

                            S.ajax({
                                url: 'http://api.flickr.com/services/rest/',
                                dataType: 'jsonp',
                                data: {
                                    'method': 'flickr.favorites.getPublicList',
                                    'api_key': '5d93c2e473e39e9307e86d4a01381266',
                                    'user_id': '26211501@N07',
                                    'per_page': pagesize,
                                    'format': 'json',
                                    'page': idx
                                },
                                jsonp: 'jsoncallback',
                                //jsonpCallback: 'getFavorites',
                                success: function(data) {
                                    var html = 'Fetch photo failed, pls try again!';

                                    if (data.stat === 'ok') {
                                        html = '';
                                        S.each(data.photos.photo, function(item, i) {
                                            html += '<img src="http://farm' + item.farm + '.static.flickr.com/'
                                                    + item.server + '/' + item.id + '_' + item.secret + '_t.jpg" />';
                                        });
                                    }
                                    content.removeClass('loading').html(html);

                                    // 加载完内容后, 通知下分页器更新加载状态
                                    ready(idx);
                                },
                                error: function(data) {
                                    content.removeClass('loading').html('error in request data.');
                                    ready(idx);
                                }
                            });
                        },
                        events: {
                            'J_jumpToBtn': {
                                click: function(e) {
                                    var pg = this;
                                    pg.page(pg.get('container').one('#J_jumpTo').val());
                                }
                            }
                        }
                    }),
                    newSelect = function() {
                        var select = MenuButton.Select.decorate('#decorateSelect', {
                            prefixCls:"c2c-",
                            menuAlign:{
                                offset:[0,-1]
                            },
                            menuCfg:{
                                width:82,
                                height:150,
                                elStyle:{
                                    overflow:"auto",
                                    overflowX:"hidden"
                                }
                            }
                        });
                        select.on("click", function(e) {
                            pagesize = select.get("value");
                            // 更新页码后, 重新获取数据;
                            pagination.page(pagination.get('currentPage'));
                        });
                        select.set("value", pagesize);
                        return select;
                    },
                    select = newSelect();

            pagination.on('beforePageChange', function(v) {
                // 更新分页器前, 销毁其他组件
                select && select.destroy();
            });
            pagination.on('afterPageChange', function(v) {
                // 重新初始化 select
                select = newSelect();
            });
        });
    </script>
</div>
<div class="s-section">
    <h4 class="s-title"><a href="http://docs.kissyui.com/kissy-gallery/gallery/random-show/1.0/demo.html">随机显示</a></h4>

    <style>
        .brandshow {
            width: 750px;
            height: 200px;
            position: relative;
            visibility: hidden;
        }

        .brandshow a {
            position: absolute;
            border: 1px solid #00cccc;
            display: block;
            width: 156px;
            height: 52px;
        }
    </style>

    <div class="brandshow s-content ">

        <a href="../"></a><a href="../"></a><a href="../"></a><a href="../"></a><a href="../"></a><a
            href="../"></a><a href="../"></a><a href="../"></a><a href="../"></a><a href="../"></a><a href="../"></a><a href="../"></a><a href="../"></a><a href="../"> </a>
    </div>
    <script>
        KISSY.use('gallery/random-show/1.0/', function(S, RS) {
            var rs = new RS.RandomShow('.brandshow');
            rs.run();
        })
    </script>

</div>

<div class="s-section">
    <h4 class="s-title"><a href="http://docs.kissyui.com/kissy-gallery/gallery/couple-select /1.0/demo.html">模拟MultiSelect</a></h4>

    <style>
        /* Modules:= multipleselect {{{ */

        .multipleselect {
            position: relative;
            width: 650px;
            height: 228px;
            overflow: hidden;
            background: url(//docs.kissyui.com/kissy-gallery/gallery/couple-select/1.0/tmp/multipleselect.png) no-repeat;
        }

        .multipleselect .panel {
            position: absolute;
            left: 0;
            top: 0;
            width: 268px;
            height: 210px;
            overflow: hidden;
        }

        .multipleselect .s {
            left: 21px;
        }

        .multipleselect .t {
            left: 362px;
        }

        .multipleselect .handler {
            width: 56px;
            top: 70px;
            left: 298px;
        }

        .multipleselect .handler button {
            display: block;
            width: 50px;
            height: 25px;
        }

        .multipleselect .panel h4 {
            height: 40px;
            line-height: 40px;
            font-size: 14px;
            font-weight: bold;
        }

        .multipleselect .panel ul {
            width: 248px;
            height: 150px;
            overflow-y: auto;
            overflow-x: hidden;
            margin: 10px;
        }

        .multipleselect .panel li {
            margin: 2px 0;
            padding: 2px 0px 2px 5px;
            cursor: pointer;
        }

        .multipleselect li.select {
            background-color: #cce7f7;
        }

        /* }}} */

        .demo2 {
            height: 100px;
            padding-bottom: 10px;
        }

        .demo2 a {
            margin-right: 5px;
        }

        .demo2 a.select {
            background: blue;
            color: #fff;
        }

        .demo2 .source, .demo2 .target {
            float: left;
            width: 200px;
            height: 100px;
            padding: 5px;
        }

        .demo2 .source {
            background: #ccc;
            margin-right: 20px;
        }

        .demo2 .target {
            background: #ccc;
        }

    </style>
    <div class="s-content">
    <div id="demo1" class="multipleselect">
        <div class="panel s">
            <h4>选择类目</h4>
            <ul class="source">
                <li class="option selected" data-id="1">这是一个类目1已选择</li>
                <li class="option selected" data-id="2">这是一个类目2已选择</li>
                <li class="option" data-id="3">这是一个类目3</li>
                <li class="option" data-id="4">这是一个类目4</li>
                <li class="option" data-id="5">这是一个类目5</li>
                <li class="option" data-id="6">这是一个类目6</li>
                <li class="option" data-id="7">这是一个类目7</li>
                <li class="option" data-id="8">这是一个类目8</li>
            </ul>
        </div>
        <div class="panel t">
            <h4>已选择类目</h4>
            <ul class="target">
            </ul>
        </div>
        <div class="panel handler">
            <button class="J_add">&gt;</button>
            <button class="J_addall">&gt;&gt;</button>
            <button class="J_removeall">&lt;&lt;</button>
            <button class="J_remove">&lt;</button>
        </div>
    </div>
    <div class="result">
        已选择：<input type="text" id="ds"/> <em>双击可以选中/移除对应的option</em>
    </div>
    </div>
    <script>
        KISSY.use('gallery/couple-select/1.0/', function(S, Coupleselect) {
            var d = new Coupleselect("#demo1");

            d.on("change", function(ev) {
                var arr = []
                S.each(ev.selected, function(item) {
                    arr.push(item[0]);
                });
                S.one("#ds").val(arr.join(","));
            });
        });
    </script>
</div>
<div class="s-section">
    <h4 class="s-title"><a href="http://docs.kissyui.com/kissy-gallery/gallery/reflection/1.0/demo.html">图片倒影效果</a></h4>

    <style>
        .r {
            float: left;
            display: inline;
            margin: 20px 0 20px 8px;
            width: 180px;
        }

        .section {
            overflow: hidden;
            height: 500px;
        }
    </style>
    <div id="demo2" class="s-content  clearfix" style="background:#000;">
        <a href="#"><img src="http://img02.taobaocdn.com/bao/uploaded/i2/T1Mw1mXdRMXXaH.X6X.JPEG" class="d1 r" data-rheight=".2"></a>
        <a href="#"><img src="http://img04.taobaocdn.com/bao/uploaded/i4/T1g_5bXaRyXXaH.X6X.JPEG" class="d1 r" data-ropacity="0.8"></a>
        <a href="#"><img src="http://img03.taobaocdn.com/bao/uploaded/i3/T1yIGmXjNVXXaH.X6X.JPEG" class="d1 r" data-rheight=".6" data-ropacity="1"></a>
        <a href="#"><img src="http://img04.taobaocdn.com/bao/uploaded/i4/T1GNqmXXlHXXaH.X6X.JPEG" class="d2 r"></a>
    </div>
    <div class="s-demo">
        <script>
            KISSY.use('gallery/reflection/1.0/', function(S, Reflection) {
                S.ready(function(S) {
                    /*当有一个参数时，给.demo1选择器选择的图片创建倒影，倒影的高度和透明度比例都默认为0.5*/
                    new Reflection('.d1');
                    /*当有两个参数时，给.demo2选择器选择的图片创建倒影，倒影的高度和透明度比例在第二个参数中配置*/
                    new Reflection('.d2', {'height':1,'opacity':0.9});
                });
            });
        </script>
    </div>
</div>
<div class="s-section">
    <h4 class="s-title"><a href="http://docs.kissyui.com/kissy-gallery/gallery/starrating/1.0/demo.html">评价星</a></h4>

    <div id="J_Rating" class="rating-bd s-content ">
        <div class="rating-tips">
            <h5>小提示：</h5>
            <p>点击星星就能打分了, 该打分完全是匿名滴. </p>
        </div>
        <div class="shop-rating">
            <span class="title">设计美观:</span>
            <ul class="rating-level">
                <li><a href="#" data-star-value="1" class="one-star">1</a></li>
                <li><a href="#" data-star-value="2" class="two-stars">2</a></li>
                <li><a href="#" data-star-value="3" class="three-stars">3</a></li>
                <li><a href="#" data-star-value="4" class="four-stars">4</a></li>
                <li><a href="#" data-star-value="5" class="five-stars">5</a></li>
            </ul>
            <span class="result"></span>
            <input type="hidden" size="2" value="" name="dsr1"/>
        </div>

        <div class="shop-rating">
            <span class="title">维护简易:</span>
            <ul class="rating-level">
                <li><a href="#" data-star-value="1" class="one-star">1</a></li>
                <li><a href="#" data-star-value="2" class="two-stars">2</a></li>
                <li><a href="#" data-star-value="3" class="three-stars">3</a></li>
                <li><a href="#" data-star-value="4" class="four-stars">4</a></li>
                <li><a href="#" data-star-value="5" class="five-stars">5</a></li>
            </ul>
            <span class="result"></span>
            <input type="hidden" size="2" value="" name="dsr2"/>
        </div>

        <div class="shop-rating">
            <span class="title">加载迅速:</span>
            <ul class="rating-level">
                <li><a href="#" data-star-value="1" class="one-star">1</a></li>
                <li><a href="#" data-star-value="2" class="two-stars">2</a></li>
                <li><a href="#" data-star-value="3" class="three-stars">3</a></li>
                <li><a href="#" data-star-value="4" class="four-stars">4</a></li>
                <li><a href="#" data-star-value="5" class="five-stars">5</a></li>
            </ul>
            <span class="result"></span>
            <input type="hidden" size="2" value="" name="dsr3"/>
        </div>
        <div class="rating-pop-tip" style="display: none;"></div>
        <!-- <p class="msg"><span class="error"></span></p> -->
        <script>
            KISSY.use('gallery/starrating/1.0/, gallery/starrating/1.0/assets/starrating.css', function(S, StarRating) {
                var a = new StarRating({
                    container: '#J_Rating',
                    reason: [
                        ['太丑了', '不好看', '一般般', '很漂亮', '哇!非常漂亮'],
                        ['太难维护了', '不好维护', '一般般', '维护很简单', '维护超级容易'],
                        ['太慢了', '有点小慢', '一般般', '挺快的', '超级快!']
                    ],
                    level: ['非常不满意','很不满意','一般','很满意','非常满意']
                });
                a.on('rating', function(ev) {
                    S.log('给第' + (ev.idx + 1) + '项打分为' + ev.score);
                });
            });
        </script>
    </div>
</div>
<div class="s-section">
    <h4 class="s-title"><a href="http://docs.kissyui.com/kissy-gallery/gallery/grid/1.0/index.html">Grid</a></h4>

    <div id="J_async_grid" class="s-content "></div>
    <script>
        KISSY.use('gallery/grid/1.0/, gallery/grid/1.0/assets/uicommon.css, gallery/grid/1.0/assets/grid.css, gallery/grid/1.0/assets/bar.css', function(S, Grid) {

            var typeEnum = {"1":"高级","2":"普通","3":"初级"},
                    saleEnum = {"1":"零售","2":"分销","3":"团购"},
                    asyncStore = new Grid.Store({
                        url:'data',
                        autoLoad:true
                    }),
                    asyncConfig = {
                        renderTo:'J_async_grid',
                        columns:[
                            { title: '渠道名称',width: 150,sortable :true, dataIndex: 'name'},
                            { title: '渠道类型',width: 150, dataIndex: 'type',renderer:Grid.Util.Format.enumRenderer(typeEnum)},
                            { title : '创建时间',width:100,dataIndex : 'time',renderer : Grid.Util.Format.dateRenderer},
                            { title: '销售方式',width: 150, dataIndex: 'sale',renderer:Grid.Util.Format.multipleItemsRenderer(saleEnum)},
                            { title: '操作',width: 100, dataIndex: 'isDelete',renderer:function(value) {
                                return '<span class="grid-command btn-del">删除</span>';
                            }}
                        ],
                        loadMask:true,
                        store:asyncStore,
                        tbar:{buttons:[
                            {id:'addchanel',text:'添加渠道',handler:function() {
                                alert('异步添加');
                            },css:'bar-btn-add'}
                        ]},
                        bbar:{pageSize : 20}
                    };

            var asyncGrid = new Grid.Grid(asyncConfig);

            asyncGrid.on('cellclick', function(event) {

                var sender = S.one(event.domTarget);
                if (sender.hasClass('btn-del')) {
                    alert('异步删除');
                }
            });
        });
    </script>
</div>
<div class="s-section">
    <h4 class="s-title"><a href="http://docs.kissyui.com/kissy-gallery/gallery/index.html">查看更多 Gallery 组件</a></h4>
</div>
<pre>
Gallery 组件使用说明:

    1) 引入 &lt;script src="http://assets.daily.taobao.net/s/kissy/1.2.0/kissy.js">&lt;/script>
    2) 全局配置
    &lt;script>
        KISSY.config({
        // 添加 gallery 包配置, !!需要指定绝对路径
        packages:[
        {
            name:"gallery",
            tag:"20111223",
            path:"http://assets.daily.taobao.net/s/kissy/",
            charset:"utf-8"
        }
        ],
        // 通过 map 规则支持 cdn combo, 可以减少请求数, 根据需要合并assets请求. 注意: 用到哪些 assets 就 combo 那些. 慎用通配符进行映射!!
        map:[
            // Gallery 组件 JS combo 成一个
            [/http:\/\/assets.daily.taobao.net\/s\/kissy\/gallery\/(?:countdown|random-show|couple-select|reflection|starrating|grid|digital-clock|pagination)\/1.0\/index(-min)?\.js(.+)$/, "http://assets.daily.taobao.net/s/kissy/gallery/??countdown/1.0/index$1.js,random-show/1.0/index$1.js,couple-select/1.0/index$1.js,reflection/1.0/index$1.js,starrating/1.0/index$1.js,grid/1.0/index$1.js,digital-clock/1.0/index$1.js,pagination/1.0/index$1.js$2"],
            // Gallery 组件 CSS combo 成一个
            [/http:\/\/assets.daily.taobao.net\/s\/kissy\/gallery\/(?:grid|countdown|pagination|starrating|digital-clock)\/1.0\/assets\/(?:uicommon|grid|bar|countdown|pagination|starrating|digital-clock-js)(-min)?\.css(.+)$/, "http://assets.daily.taobao.net/s/kissy/gallery/??grid/1.0/assets/uicommon$1.css,grid/1.0/assets/grid$1.css,grid/1.0/assets/bar$1.css,countdown/1.0/assets/countdown$1.css,pagination/1.0/assets/pagination$1.css,starrating/1.0/assets/starrating$1.css,digital-clock/1.0/assets/digital-clock-js$1.css$2"],
            // KISSY 组件 JS combo 成一个
            [/http:\/\/assets.daily.taobao.net\/s\/kissy\/1.2.0\/(?:calendar|template|uibase|component|button|menu|menubutton|switchable)(-min)?.js(.+)$/, "http://assets.daily.taobao.net/s/kissy/1.2.0/??calendar$1.js,template$1.js,uibase$1.js,component$1.js,button$1.js,menu$1.js,menubutton$1.js,switchable$1.js$2"]
        ]
        });
    &lt;/script>
    3) 使用各个组件, 拿倒计时为例:
    &lt;script>
        KISSY.ready(function (S) {
            S.use("gallery/digital-clock/1.0/, gallery/digital-clock/1.0/assets/digital-clock-js.css", function(S, DC) {
                // 初始化倒计时
                var clock = new DC.DigitalClockJS({
                    render: S.one("#clock_con"),
                    zoomLimit: S.UA.ie == 6 ? 0.2 : 0.15,
                    autoRender:true,
                    zoom:1
                });


                setInterval(function () {
                    clock.set("date", new Date());
                }, 1000);
            });
        });
    &lt;/script>
</pre>

</div>
</div>
</div>
<div id="footer">
    &copy; Copyright 2010~2011, KISSY Team.
</div>
</body>
</html>